<template>
    <div class="m-25 mt-65">
        <div class="normal-box-mod">
            <div class="normal-box-hd clearfix">
                <div class="normal-box-title">
                    <h2>积分提现账单</h2>
                </div>
            </div>
            <div class="normal-box-bd">
                <div class="normal-list-page-mod">
                    <Card style="margin-bottom: 10px;">
                        <div class="normal-list-page-hd clearfix">
                           账单状态：<Select  style="width:100px" :clearable=true class="mr-10" v-model="queryData.status">
                                <Option v-for="item in status" :value="item.value" :key="item.value">{{ item.label }}</Option>
                               </Select>
                            时间：<DatePicker type="daterange" class="mr-10" confirm placement="bottom"
                                           @on-change="times" placeholder="选择时间" style="width: 210px"></DatePicker>
                            <Button type="primary" custom-icon="iconfont icon-chaxun" size="small" @click='inQuire' style="margin-right: 300px">查询</Button>
                        </div>
                    </Card>
                    <div class="normal-list-page-bd">
                        <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData"></Table>
                    </div>
                    <div>
                        <Page :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page" show-total show-elevator @on-change="changePage"></Page>
                        <!-- <span style="float: right;">共{{queryData.totalRecord}}条数据</span> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import ckIntegralTXApi from '@/api/bill/IntegralTX.js'
import { Message } from 'iview'
import moment from 'moment'
import queryData from '@/view/test/cityTestZj.vue'

export default {
  components: { queryData },
  name: 'lntegralSet',
  data () {
    return {
      status: [
        {
          value: '0',
          label: '失败'
        },
        {
          value: '1',
          label: '成功'
        }
      ],
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          {
            title: '订单编号',
            align: 'center',
            key: 'orderid',
            minWidth: 200
          },
          {
            title: '用户收款账号',
            align: 'center',
            key: 'openid',
            minWidth: 160
          },
          {
            title: '用户卡号',
            align: 'center',
            key: 'userid',
            minWidth: 100
          },
          {
            title: '交易时间',
            align: 'center',
            key: 'insertTime',
            minWidth: 150
          },
          {
            title: '订单积分(分)',
            align: 'center',
            key: 'integral',
            minWidth: 150
          },
          {
            title: '订单金额(元)',
            align: 'center',
            key: 'money',
            minWidth: 50
          },
          {
            title: '备注',
            align: 'center',
            key: 'remark',
            minWidth: 150
          },
          {
            title: '收款方式',
            key: 'type',
            align: 'center',
            minWidth: 100,
            render: (h, params) => {
              if (params.row.type == '1') {
                return h('div', [h('p', { style: 'color: green' }, '微信')])
              } else if (params.row.status == '0') {
                return h('div', [h('p', { style: 'color: red' }, '支付宝')])
              }
            }
          },
          {
            title: '订单状态',
            key: 'status',
            align: 'center',
            minWidth: 100,
            render: (h, params) => {
              if (params.row.status == '1') {
                return h('div', [h('p', { style: 'color: green' }, '转账成功')])
              } else if (params.row.status == '0') {
                return h('div', [h('p', { style: 'color: red' }, '转账失败')])
              }
            }
          },
          {
            title: '操作',
            align: 'center',
            width: 130,
            render: (h, params) => {
              if (params.row.status == '0') {
                return h('div', { class: 'action-group' }, [
                  h(
                    'Button',
                    {
                      props: {
                        type: 'error',
                        size: 'small'
                      },
                      class: 'mr-20',
                      on: {
                        click: () => {
                          // this.showUpdateModal(params.index);
                          this.delData(params.row)
                        }
                      }
                    }, '转账'
                  )

                ])
              } else {
                return h('div', { class: 'action-group' }, [
                  h(
                    'Button',
                    {
                      props: {
                        type: 'success',
                        size: 'small'
                      },
                      class: 'mr-20',
                      on: {
                        click: () => {
                          // this.showUpdateModal(params.index);
                          this.$Message.warning('已转账请勿重复操作')
                        }
                      }
                    }, '已转账'
                  )

                ])
              }
            }
          }
        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        status: '',
        totalRecord: 0
      }
    }
  },
  methods: {
    times (e) {
      let that = this
      that.queryData.startDate = e[0]
      that.queryData.endDate = e[1]
    },
    // 获取列表
    getTableData () {
      const that = this
      that.queryData.totalRecord = undefined
      ckIntegralTXApi.getPageList(that.queryData)
        .then(res => {
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.limit = res.data.pageSize
        })
        .catch(error => {
          Message.error(error)
        })
    },
    delData (ids) {
      this.$Modal.confirm({
        title: '确认转账',
        content:
                        '<p>此无法撤销，请谨慎操作！</p>',
        loading: true,
        onOk: () => {
          ckIntegralTXApi.updateStatus(ids).then(res => {
            this.$Modal.remove()
            if (!res.code) {
              this.$Notice.success({
                title: '转账成功'
              })
              this.queryData.page = 1
              this.getTableData()
            } else {
              this.$Notice.error({
                title: res.message
              })
            }
          })
        }
      })
    },
    // 查询
    inQuire () {
      const that = this
      that.queryData.page = 1
      that.getTableData()
    },

    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },
    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    }
  },

  created () {
    this.getTableData()
  }
}
</script>
